<template>
	<view style="font-size: 28rpx;">
		<view class="topBtn">
			<text @click="search('')">全部</text>
			<text @click="search(1)">待付款</text>
			<text @click="search(3)">待收货</text>
			<text @click="search(4)">已完成</text>
		</view>
		<view class="main">
			<view class="orderDetail" v-for="item in orderDetail" :key="item.id" @click="detail(item)" style="position: relative;">
				<view style="position: absolute;width: 100%;height: 100%;background: rgba(0,0,0,.01);z-index: 2;color: red;display: flex;align-items:flex-end;flex-direction: row-reverse;" v-if="item.status==0">
					已退款
				</view>
				<view style="width: 120rpx;">
					<text style="line-height: 72rpx;">订单编号:</text>
					<image :src="item.goods_imgs"></image>
				</view>
				<view style="width: 400rpx;">
					<text style="line-height: 72rpx;">{{item.order_id}}</text>
					<view>{{item.goods_name}}</view>
					<view class="time" style="font-size: 22rpx;color: #AAAAAA;">
						{{item.create_time}}
					</view>
				</view>
				<view style="width: 126rpx;">
					<view style="line-height: 72rpx;text-align:right;" class="status">
					{{
						item.status==1?'待付款':item.status==2?'待发货':item.status==3?'待收货':item.status==4?'已完成':''
					}}
					</view>
					<view style="text-align:right;">
						<text>{{item.goods_jf}}积分</text>
						<text style="font-size: 22rpx;color: #AAAAAA;">x{{item.goods_num}}</text>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderDetail:[
					{
						item:'3021032100390',
						dec:'服务区凑我去财务部吃不胖咕咕咕咕咕',
						im:'http://rchqfbdix.hn-bkt.clouddn.com/1111.jpg',
						time:'2020-05-12 11:32:22',
						status:'已完成',
						jifen:'1280',
						num:'1'
					},
					{
						item:'3021032100390',
						dec:'服务区凑我去财务部吃不胖咕咕咕咕咕',
						im:'http://rchqfbdix.hn-bkt.clouddn.com/1111.jpg',
						time:'2020-05-12 11:32:22',
						status:'待收货',
						jifen:'1280',
						num:'1'
					},
					{
						item:'3021032100390',
						dec:'服务区凑我去财务部吃不胖咕咕咕咕咕',
						im:'http://rchqfbdix.hn-bkt.clouddn.com/1111.jpg',
						time:'2020-05-12 11:32:22',
						status:'已完成',
						jifen:'1280',
						num:'1'
					},
					{
						item:'3021032100390',
						dec:'服务区凑我去财务部吃不胖咕咕咕咕咕',
						im:'http://rchqfbdix.hn-bkt.clouddn.com/1111.jpg',
						time:'2020-05-12 11:32:22',
						status:'待收货',
						jifen:'1280',
						num:'1'
					},
					{
						item:'3021032100390',
						dec:'服务区凑我去财务部吃不胖咕咕咕咕咕',
						im:'http://rchqfbdix.hn-bkt.clouddn.com/1111.jpg',
						time:'2020-05-12 11:32:22',
						status:'待收货',
						jifen:'1280',
						num:'1'
					}
				]
			}
		},
		methods: {
			search(num){
				const name= uni.getStorageSync('userInfo');
				uni.request({
					url:'http://localhost:3001'+'/statusSearch',
					method:"GET",
					data:{
						orderStatus:num,
						name:name
					},
					success:(res)=>{
						this.orderDetail=res.data.data
					}
				})
			},
			getAllData(){
				const name= uni.getStorageSync('userInfo');
				// console.log(value);
				uni.request({
				    url: 'http://localhost:3001'+'/getData', //仅为示例，并非真实接口地址。
					data:{
						name
					},
				    success: (res) => {
				        // console.log(res.data.data);
						this.orderDetail=res.data.data
				    }
				});
			},
			//向订单详情传递数据
			detail(goods){
  				console.log(goods)
  				uni.navigateTo({
  				url:'/pages/orderDetails/orderDetails?goods=' + encodeURIComponent(JSON.stringify(goods))
  				})
  			}
		},
		created(){
			this.getAllData()
		}
	}
</script>

<style>
	.topBtn{
		line-height: 100rpx;
		background-color:#F2F2F2;
		display: flex;
		justify-content: space-evenly;
	}
	.main{
		padding: 0 24rpx;
	}
	.main>.orderDetail{
		height: 226rpx;
		border-bottom: 1px solid grey;
		display: flex;
		justify-content:space-between;
		padding-bottom: 24rpx;
		box-sizing: border-box;
	}
/* 	.main>.orderDetail>view{
		border: 1px solid red;
	} */
	.orderDetail image{
		width: 120rpx;
		height: 120rpx;
	}
	.orderDetail .status{
		color: #02A7F0;
	}
	.orderDetail :nth-child(3){
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
</style>
